﻿@model Actya.Web.ViewModels.Admin.EditSitemapViewModel
@{
	ViewBag.Title = "Sitemap";
}
@section head {
	
	<script type="text/javascript">
		var isMoving = false;

		$(document).ready(function () {
			$('.sitemapitem').live("mouseover", function () {
				$(this).children('a').show();
				$(this).find('form > a').show();
			}).live("mouseout", function () {
				$(this).children('a').hide();
				$(this).find('form > a').hide();
			});

			$('.sitemapitem > a.editlink').live("click", function () {
				var $item = $(this).parent();
				$item.load('@Url.Action("EditAjax", "Sitemap")', { 'nodeId': $item.data('nodeid') });
				return false;
			});

			$('.sitemapitem-edit > form > a.cancellink').live("click", function () {
				var $item = $(this).parent().parent();
				$item.parent().load('@Url.Action("ItemAjax", "Sitemap")', { 'nodeId': $item.data('nodeid') });
				return false;
			});

			$('.sitemapitem-edit > form > input[type="submit"]').live("click", function () {
				var $form = $(this).parent();
				var $item = $(this).closest('.sitemapitem');
				$.ajax({
					type: 'POST',
					data: $form.serialize(),
					url: $form.attr('action'),
					success: function (data) {
						$item.html(data);
					}
				});
				return false;
			});

			$('ul.sortable').sortable({
				placeholder: 'extra',
				tolerance: 'intersect',
				handle: 'div > img',
				cursor: 'move',
				start: function (ev, ui) {
					ui.item.find('div.sitemapitem > a').hide();
					ui.item.find('div.sitemapitem > form > a').hide();
				},
				update: function (ev, ui) {
					if (!isMoving) {
						var parentNodeId = ui.item.parent().closest('li').children('div.sitemapitem').data('nodeid');
						var childNodeIds = $(this).sortable('toArray');
						$.ajax({
							type: 'POST',
							url: '@Url.Action("SortNodes", "Sitemap")',
							data: { parentNodeId: parentNodeId, orderedChildNodeIds: childNodeIds },
							dataType: 'json',
							traditional: true
						});
					}
				}
			});

			$('.nodetitle').droppable({
				hoverClass: 'droppableHover',
				tolerance: 'pointer',
				drop: function (event, ui) {
					isMoving = true;
					var $newParentItem = $(this).parents('div.sitemapitem');
					var newParentNodeId = $newParentItem.data('nodeid');
					var nodeId = $(ui.draggable).children('div.sitemapitem').data('nodeid');
					$.ajax({
						type: 'POST',
						url: '@Url.Action("ChangeParent", "Sitemap")',
						data: { nodeId: nodeId, newParentNodeId: newParentNodeId },
						success: function (data) {
							if (data == 'Success') {
								$('ul.sortable').sortable('cancel');
								window.location.href = '@Url.Action("Index", "Sitemap")';
							}
						},
						dataType: 'json'
					});
				}
			});
		});
	</script>
}

@section help
{
	Manage the navigation structure. You can add pages, links and folders.
}

<h2>@ViewBag.Title</h2>

@DisplayNodes(Model.SitemapNodes)

@section sidebar {
	<ul>
		<li>@Html.ActionLink("New sitemap item", "Create")</li>
	</ul>
}

@helper DisplayNodes(IEnumerable<SitemapNode> nodes) {
	<ul class="sortable">
		@foreach (SitemapNode node in nodes) {
		<li id="@node.Id">
			@Html.Partial("_ViewSitemapItem", node)
			@DisplayNodes(node.SitemapNodes)
		</li> 
		}
	</ul>
}

